<template>
  <div style="padding:0 10px">
    <row-scroll :rowData="navData" @select="navSelect" :cols="5.5" :cellHeight="40"></row-scroll>
  </div>
</template>

<script>
  import { RowScroll } from '@/views/home/components'
  export default {
    name: 'category-nav',
    props: {
      navData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    created() {
      this.changeColor()
    },
    components: {
      RowScroll
    },
    methods: {
      navSelect(item) {
        if (item.id === 0) {
          this.$router.push('/home')
        } else {
          this.$router.push({
            path: '/category',
            query: {
              id: item.id
            }
          })
        }
      },
      changeColor(type) {
        const id = this.$route.query.id
        if (!id && !type) {
          return
        }
        this.$emit('navchange', id)
        this.navData.forEach((element, index) => {
          if (element.id === id) {
            this.$set(this.navData[index], 'checked', true)
            // document.title = this.navData[index].title
          } else {
            this.$set(this.navData[index], 'checked', false)
          }
        })
        if (type) {
          this.$set(this.navData[0], 'checked', true)
        }
      }
    },
    watch: {
      navData() {
        this.changeColor()
      },
      $route() {
        this.changeColor()
      }
    },
    computed: {}
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/assets/css/mixin.scss";
  @import 'src/assets/css/variables.scss';
</style>
